<template>
  <div class="find">
    <!-- 导航栏 -->
    <MMNavBar :showBack="false" title="发现"></MMNavBar>
    <!-- 面试技巧区域 -->
    <div class="technic-container">
      <MMCell title="面试技巧" value="查看更多"></MMCell>
      <!-- 列表项 -->
      <div class="technic-list">
        <!-- 有图片 -->
        <div class="item">
          <div class="left">
            <h3>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Laboriosam pariatur nulla deleniti ipsam voluptas minima minus ex
              assumenda vero cupiditate praesentium exercitationem quia,
              consectetur, error voluptatem officia asperiores quisquam? Sequi?
            </h3>
            <div class="detail-box">
              <div class="time">2020-8-1</div>
              <div class="read">
                <i class="iconfont iconicon_liulanliang"></i>
                12
              </div>
              <div class="star">
                <i class="iconfont iconicon_dianzanliang"></i>
                31
              </div>
            </div>
          </div>
          <div class="cover">
            <img src="../../assets/logo.png" alt="" />
          </div>
        </div>
        <!-- 没有图片 -->
        <div class="item">
          <div class="left">
            <h3>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Laboriosam pariatur nulla deleniti ipsam voluptas minima minus ex
              assumenda vero cupiditate praesentium exercitationem quia,
              consectetur, error voluptatem officia asperiores quisquam? Sequi?
            </h3>
            <div class="detail-box">
              <div class="time">2020-8-1</div>
              <div class="read">
                <i class="iconfont iconicon_liulanliang"></i>
                12
              </div>
              <div class="star">
                <i class="iconfont iconicon_dianzanliang"></i>
                31
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 市场数据区域 -->
    <div class="data-container">
      <MMCell title="市场数据" value="查看更多"></MMCell>
      <div class="data-content">
        <div class="tags">
          <span class="tag">深圳</span>
          <span class="tag">前端开发工程师</span>
        </div>
        <!-- 列表 -->
        <div class="data-list">
          <!-- 箭头上 -->
          <div class="item">
            <div class="time">2020年</div>
            <div class="process">
              <div class="step">¥12122</div>
            </div>
            <div class="arrow-box">
              <i class="iconfont iconicon_shangsheng"></i>
              10%
            </div>
          </div>
          <!-- 箭头下 -->
          <div class="item">
            <div class="time">2020年</div>
            <div class="process">
              <div class="step">¥12122</div>
            </div>
            <div class="arrow-box">
              <i class="iconfont iconicon_xiajiang"></i>
              10%
            </div>
          </div>
        </div>
        <!-- 更多 -->
        <div class="more">
          展开更多
          <i class="iconfont iconicon_zhankai"></i>
        </div>
      </div>
    </div>
    <!-- 面经分享 -->
    <div class="share-container">
      <MMCell title="面经分享" value="查看更多"> </MMCell>
      <div class="share-content">
        <div class="list">
          <div class="item van-hairline--bottom">
            <h3>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
              aliquid nisi aspernatur voluptatem dicta suscipit accusantium hic,
              itaque labore aut nam mollitia nesciunt omnis fugit, ratione
              beatae veniam laborum saepe.
            </h3>
            <div class="desc">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Similique, iusto accusantium. Delectus hic, quisquam aperiam
              possimus vel blanditiis harum quod laboriosam distinctio tenetur
              nostrum dolor nisi quia aspernatur eligendi odio?
            </div>
            <div class="detail-box">
              <div class="user">
                <img src="../../assets/logo.png" alt="" />
                交钥匙谁
              </div>
              <div class="time">
                2020-8-1
              </div>
              <div class="comment">
                <i class="iconfont iconicon_pinglunliang"></i>
                1231
              </div>
              <div class="star">
                <i class="iconfont iconicon_dianzanliang"></i>
                1231
              </div>
            </div>
          </div>
          <div class="item van-hairline--bottom">
            <h3>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
              aliquid nisi aspernatur voluptatem dicta suscipit accusantium hic,
              itaque labore aut nam mollitia nesciunt omnis fugit, ratione
              beatae veniam laborum saepe.
            </h3>
            <div class="desc">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Similique, iusto accusantium. Delectus hic, quisquam aperiam
              possimus vel blanditiis harum quod laboriosam distinctio tenetur
              nostrum dolor nisi quia aspernatur eligendi odio?
            </div>
            <div class="detail-box">
              <div class="user">
                <img src="../../assets/logo.png" alt="" />
                交钥匙谁
              </div>
              <div class="time">
                2020-8-1
              </div>
              <div class="comment">
                <i class="iconfont iconicon_pinglunliang"></i>
                1231
              </div>
              <div class="star">
                <i class="iconfont iconicon_dianzanliang"></i>
                1231
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'find'
}
</script>

<style lang="less">
.find {
  // 全部设置cell左侧标题
  .van-cell__title span {
    font-size: 16px;
    font-weight: 600;
  }
  // 面试技巧
  .technic-container {
    margin-bottom: 10px;
    .technic-list {
      padding: 0 15px;
      background: @white-color;
      .item {
        display: flex;
        align-items: center;
        .left {
          flex: 1;
          h3 {
            font-weight: 600;
            font-size: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .detail-box {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: @minor-font-color;
            .time {
              flex: 1;
            }
            .read {
              margin-right: 20px;
              display: flex;
              align-items: center;
              i {
                margin-right: 10px;
                font-size: 14px;
              }
            }
            .star {
              display: flex;
              align-items: center;
              i {
                margin-right: 10px;
                font-size: 14px;
              }
            }
          }
        }
        .cover {
          margin-left: 20px;
          img {
            display: block;
            width: 113px;
            height: 73px;
            border-radius: 8px;
          }
        }
      }
    }
  }
  // 市场数据
  .data-container {
    background: @white-color;
    margin: 10px;
    .data-content {
      padding: 0 15px;
    }
    .tags {
      margin-bottom: 20px;
      .tag {
        background: @minor-font-color;
        color: @subdominant-font-color;
        font-size: 12px;
        padding: 5px;
        margin-right: 10px;
        border-radius: 8px;
      }
    }
    // 列表
    .data-list {
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .time {
          font-size: 12px;
          color: @subdominant-font-color;
          margin-right: 15px;
        }
        .process {
          height: 12px;
          background: @minor-font-color;
          border-radius: 8px;
          overflow: hidden;
          margin-right: 15px;
          flex: 1;
          .step {
            height: 100%;
            width: 50%;
            background: @error-color;
            color: @white-color;
            text-align: right;
            font-size: 12px;
            padding-right: 5px;
            border-radius: 8px;
          }
        }
        .arrow-box {
          display: flex;
          align-items: center;
          font-size: 12px;
          i {
            font-size: 16px;
            // 箭头下
            &.iconicon_xiajiang {
              color: @error-color;
            }
            // 箭头上
            &.iconicon_shangsheng {
              color: @success-color;
            }
          }
        }
      }
    }
    // 更多
    .more {
      display: flex;
      justify-content: center;
      font-size: 12px;
      color: @subdominant-font-color;
      align-items: center;
      i {
        color: @minor-font-color;
        font-size: 14px;
      }
    }
  }
  // 面经分享
  .share-container {
    background: @white-color;
    .share-content {
      padding: 0 15px;
    }
    .list {
      .item {
        h3 {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          font-size: 14px;
          font-weight: 600;
        }
        .desc {
          font-size: 12px;
          color: @subdominant-font-color;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-bottom: 20px;
        }
        .detail-box {
          display: flex;
          align-items: center;
          .user {
            display: flex;
            align-items: center;
            color: @subdominant-font-color;
            font-size: 12px;
            flex: 1;
            img {
              width: 22px;
              height: 22px;
              border-radius: 50%;
            }
          }
          .time,
          .comment,
          .star {
            font-size: 12px;
            color: @minor-font-color;
          }
          .time {
            margin-right: 20px;
          }
          .comment {
            margin-right: 20px;
            display: flex;
            align-items: center;
            i {
              font-size: 16px;
            }
          }
          .star {
            display: flex;
            align-items: center;
            i {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
